<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <button @click="toHome">Go to Home</button>
    <HelloWorld msg="Vite + Vue" />
    <div class="app">
      <h2 class="title">Vue路由测试</h2>
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/home" active-class="active">首页</RouterLink><br>
        <RouterLink to="/state" active-class="active">state</RouterLink><br>
        <RouterLink to="/father" active-class="active">Father</RouterLink><br>
        <RouterLink to="/ele" active-class="active">ele</RouterLink><br>
        <RouterLink to="/testForm" active-class="active">Form</RouterLink><br>
        <RouterLink to="/test" active-class="active">table</RouterLink><br>
        <RouterLink to="/charts" active-class="active">charts</RouterLink><br>
      </div>
    </div>
    <div style="width: 100%">
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import HelloWorld from './components/HelloWorld.vue';

const router = useRouter();
const toHome = () => {
  router.push({
    path: "/home?id=1&title=router%20%E4%BC%A0%E5%8F%91"
  });
};
</script>

<style scoped>
.main-content {
  width: 100%;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>